<template>
  <div class="project-adder">
    <el-dialog title="创建新实例" :visible.sync="isShow">
      <el-form ref="form" :model="form" :rules="rules">
        <h1>基础配置</h1>
        <el-form-item label="算法程序路径" prop="exec_command">
          <el-input ref="name" clearable v-model="form.exec_command" @keyup.native.enter="handleBtnConfirmClick"/>
        </el-form-item>
        <el-form-item label="运行目录" prop="workdir">
          <el-input ref="name" clearable v-model="form.workdir" @keyup.native.enter="handleBtnConfirmClick"/>
        </el-form-item>
        <el-divider/>
        <h1>参数设置</h1>
        <el-form-item
          v-for="(val, key) in argsList"
          label-width="120px"
          :key="key"
          :label="argsDict[key]"
        >
          <el-select multiple clearable style="width: 100%;" v-model="form.args[key]">
            <el-option
              v-for="option in val"
              :key="option.value"
              :label="option.desc"
              :value="option.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <slot name="footer">
        <div class="controls-group">
          <el-button-group style="width: 100%; display: flex; margin-top: 80px;">
            <el-button type="success" style="flex: 1;" @click="handleBtnConfirmClick">确认</el-button>
            <el-button type="danger" style="flex: 1;" @click="isShow = false">取消</el-button>
          </el-button-group>
        </div>
      </slot>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: "CommandAdder",

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    project: {
      type: Object,
      default: () => ({
        exec_command: '',
        workdir: '',
        projectId: NaN
      })
    }
  },

  data() {
    return {
      isShow: false,
      form: {
        exec_command: '',
        workdir: '',
        project: '',
        args: {}
      },
      argsList: {},
      argsDict: {},
      rules: {
        name: [
          {required: true, message: '项目名称必须填写', trigger: 'blur'}
        ]
      }
    }
  },

  watch: {
    isShow(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.isShow = !!val
      if (val) {
        this.form = {
          exec_command: this.project.exec_command,
          workdir: this.project.workdir,
          project: this.project.id,
          args: {}
        }
        this.$nextTick(() => {
          this.$refs['name'].focus()
        })
        this.fetchArgs()
      }
    }
  },

  methods: {
    fetchArgs() {
      api.options
         .list({})
         .then(({data}) => {
           this.argsList = (data.results || []).reduce((res, cur) => {
             if (res[cur.key]) {
               res[cur.key].push(cur)
             } else {
               this.$set(this.form.args, cur.key, null)
               this.$set(this.argsDict, cur.key, cur.key_name)
               res[cur.key] = [cur]
             }
             return res
           }, {})
         })
         .catch(err => {
           this.$message.error('获取参数失败')
         })
    },

    handleBtnConfirmClick() {
      this.$refs['form'].validate(isValid => {
        const form = {...this.form}
        form.args = Object.values(form.args).filter(item => item)

        if (isValid) {
          this.$emit('confirm', form)
        } else {
          this.$message.warning('请检查填写内容')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
